<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form
            inline
            size="small"
            :model="from"
            ref="from"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="信号名称：">
                  <el-input
                    v-model="from.name"
                    placeholder="请输入信号名称"
                    clearable
                    class="selWidth"
                  />
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select
                    v-model="from.status"
                    placeholder="请选择"
                    class="selWidth"
                    clearable
                  >
                    <el-option :value="1" label="正常"></el-option>
                    <el-option :value="2" label="停用"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                :xs="24"
                :sm="24"
                :md="24"
                :lg="6"
                :xl="6"
                class="text-right from"
              >
                <el-form-item>
                  <el-button
                    class="mr10"
                    size="small"
                    type="primary"
                    @click="search()"
                    >搜索</el-button
                  >
                  <el-button class="mr10" size="small" @click="reset()"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="btn_bt">
          <el-button class="mr10" size="small" type="primary" @click="add()"
            >新增</el-button
          >
          <el-button class="mr10" size="small" type="danger" @click="allDel()"
            >删除</el-button
          >
          <el-button class="mr10" size="small" @click="exportTable()"
            >导出表格</el-button
          >
        </div>
      </div>
      <el-table border
        ref="table"
        v-loading="loading"
        :data="tableData.data"
        style="width: 100%"
        size="mini"
        @selection-change="onSelectTab"
        highlight-current-row
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="userId" label="用户UID" min-width="80" />
        <el-table-column prop="nickName" label="用户昵称" min-width="80" />
        <el-table-column prop="phone" label="用户电话" min-width="120" />
        <el-table-column
          prop="dataFactoryName"
          label="数据场"
          min-width="130"
        />
        <el-table-column prop="name" label="信号名称" min-width="80" />
        <el-table-column prop="brokerage" label="费用" min-width="80" />
        <el-table-column prop="status" label="状态" min-width="80">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.status == 1">正常</el-button>
            <el-button size="mini" v-if="scope.row.status == 2">停用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="150" />
        <el-table-column
          label="操作"
          min-width="130"
          fixed="right"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="handleDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[15, 30, 45, 60]"
          :page-size="from.limit"
          :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    <el-dialog
      :title="ruleForm.id ? '编辑' : '新增'"
      :visible.sync="dialogVisible"
      width="40%"

      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :rules="rules"
        ref="ruleForm"
        :model="ruleForm"
        label-width="120px"
      >
        <el-form-item label="交易员账户：" prop="traderAccountId">
          <el-input
            v-model="ruleForm.traderAccountId"
            @focus="selectUser"
          ></el-input>
        </el-form-item>
        <el-form-item label="信号名称：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="费用：" prop="brokerage">
          <el-input v-model="ruleForm.brokerage"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>

    <!--交易员账号列表-->
    <el-dialog
      title="交易员账号列表"
      :visible.sync="userVisible"
      width="900px"

      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-card class="box-card">
        <el-table border
          :data="userData.data"
          highlight-current-row
          @current-change="onSelectUser"
          width="800px"
          size="small"
        >
          <el-table-column prop="id" label="ID" min-width="60" />
          <el-table-column prop="userId" label="用户UID" min-width="80" />
          <el-table-column prop="nickName" label="用户昵称" min-width="80" />
          <el-table-column prop="phone" label="用户电话" min-width="120" />
          <el-table-column prop="walletResponses" label="钱包" min-width="200">
            <template slot-scope="scope">
              <div
                v-for="(item, index) in scope.row.walletResponses"
                :key="index"
              >
                <span>{{ item.currencyName }}</span>
                <span style="margin-left: 10px">{{ item.balance }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="exchangeFeeTemplateName"
            label="手续费模板"
            min-width="100"
          />
          <el-table-column
            prop="traderRiskTemplateName"
            label="风控模板"
            min-width="80"
          />
          <el-table-column prop="accountType" label="	账户类型" min-width="100">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.accountType == 1"
                >资管账号</el-button
              >
              <el-button size="mini" v-if="scope.row.accountType == 2"
                >模拟账号</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="tradeType" label="内外盘" min-width="80">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.tradeType == 1"
                >国际</el-button
              >
              <el-button size="mini" v-if="scope.row.tradeType == 2"
                >国内</el-button
              >
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="80">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" v-if="scope.row.status == 1"
                >正常</el-button
              >
              <el-button type="info" size="mini" v-if="scope.row.status == 2"
                >停用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[10, 20, 30, 40]"
            :page-size="userLimit"
            :current-page="userPage"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userData.total"
            @size-change="handleUserSizeChange"
            @current-change="userPageChange"
          />
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userclose()">取 消</el-button>
        <el-button type="primary" @click="usersubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  traderaccountList,
  tradersignalList,
  tradersignalSave,
  tradersignalInfo,
  tradersignalUpdate,
  tradersignalDelete,
  tradersignalExport,
} from "@/api/user";
export default {
  name: "signal",
  data() {
    return {
      labelPosition: "right",
      from: {
        name: "",
        status: 1,
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0,
      },
      selection: [],
      dialogVisible: false,
      ruleForm: {
        id: "",
        traderAccountId: "",
        name: "",
        brokerage: "",
        status: 1,
        remark: "",
      },
      userVisible: false,
      userData: {
        data: [],
        total: 0,
      },
      currentRow: null,
      userPage: 1,
      userLimit: 10,
      rules: {
        traderAccountId: [
          {
            required: true,
            message: "请选择交易员账户",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请填写信号名称",
            trigger: "blur",
          },
        ],
        brokerage: [
          {
            required: true,
            message: "请填写费用",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    selectUser() {
      this.userPage = 1;
      this.userLimit = 10;
      this.currentRow = null;
      this.userData = {
        data: [],
        total: 0,
      };
      this.userVisible = true;
      this.getUserList();
    },
    userclose() {
      this.userPage = 1;
      this.userLimit = 10;
      this.currentRow = null;
      this.userData = {
        data: [],
        total: 0,
      };
      this.ruleForm.traderAccountId = "";
      this.userVisible = false;
    },
    usersubmit() {
      this.userPage = 1;
      this.userLimit = 10;
      this.currentRow = null;
      this.userData = {
        data: [],
        total: 0,
      };
      this.userVisible = false;
    },
    onSelectUser(val) {
      this.currentRow = val;
      console.log("选择交易员账号", val);
      this.ruleForm.traderAccountId = val.id;
    },
    handleUserSizeChange(val) {
      this.userLimit = val;
      this.getUserList();
    },
    userPageChange(page) {
      this.userPage = page;
      this.getUserList();
    },
    getUserList() {
      let data = {
        page: this.userPage,
        limit: this.userLimit,
        status: 1,
      };
      traderaccountList(data)
        .then((res) => {
          console.log("交易员列表", res);
          this.userData.data = res.list;
          this.userData.total = res.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    search() {
      console.log(this.from);
      this.from.page = 1;
      this.from.limit = 15;
      this.getlist();
    },
    reset() {
      this.from = {
        name: "",
        status: 1,
        page: 1,
        limit: 15,
      };
      this.getlist();
    },
    getlist() {
      this.loading = true;
      tradersignalList(this.from)
        .then((res) => {
          console.log(res);
          this.tableData.data = res.list;
          this.tableData.total = res.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    add() {
      this.ruleForm = {
        id: "",
        traderAccountId: "",
        name: "",
        brokerage: "",
        status: 1,
        remark: "",
      };
      this.dialogVisible = true;
    },
    close() {
      this.ruleForm = {
        id: "",
        traderAccountId: "",
        name: "",
        brokerage: "",
        status: 1,
        remark: "",
      };
      this.dialogVisible = false;
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            console.log("编辑", this.ruleForm);
            tradersignalUpdate(this.ruleForm)
              .then((res) => {
                console.log(res);
                this.close();
                this.$message.success("编辑成功");
                this.getlist();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error(err);
              });
          } else {
            console.log("新增", this.ruleForm);
            let data = {
              traderAccountId: this.ruleForm.traderAccountId,
              name: this.ruleForm.name,
              brokerage: this.ruleForm.brokerage,
              status: this.ruleForm.status,
              remark: this.ruleForm.remark,
            };
            tradersignalSave(data)
              .then((res) => {
                console.log(res);
                this.close();
                this.$message.success("新增成功");
                this.getlist();
              })
              .catch((err) => {
                console.log(err);
                this.$message.error(err);
              });
          }
        } else {
          this.$message.error("请填写完整信息");
        }
      });
    },
    // 选择
    onSelectTab(selection) {
      this.selection = [];
      selection.forEach((item) => {
        this.selection.push(item.id);
      });
      console.log(this.selection);
    },
    allDel() {
      if (this.selection.length == 0) {
        return this.$message.error("至少选择一项");
      }
      console.log(this.selection);
      this.$confirm("确认删除？")
        .then((_) => {
          tradersignalDelete(this.selection)
            .then((res) => {
              console.log(res);
              this.$message.success("删除成功");
              this.getlist();
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err);
            });
        })
        .catch((_) => {});
    },
    exportTable() {
      tradersignalExport(this.from)
        .then((res) => {
          console.log("导出表格", res);
          window.open(res.filename);
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err);
        });
    },
    handleEdit(row) {
      console.log("编辑", row);
      tradersignalInfo(row.id)
        .then((res) => {
          console.log("详情", res);
          this.ruleForm = {
            id: res.id,
            traderAccountId: res.traderAccountId,
            name: res.name,
            brokerage: res.brokerage,
            status: Number(res.status),
            remark: res.remark,
          };
          this.dialogVisible = true;
        })
        .catch((err) => {
          console.log(err);
          this.$message.error(err);
        });
    },
    handleDel(row) {
      this.$confirm("确认删除？")
        .then((_) => {
          console.log("删除", row);
          tradersignalDelete([row.id])
            .then((res) => {
              console.log(res);
              this.$message.success("删除成功");
              this.getlist();
            })
            .catch((err) => {
              console.log(err);
              this.$message.error(err);
            });
        })
        .catch((_) => {});
    },
    pageChange(page) {
      this.from.page = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.from.limit = val;
      this.getlist();
    },
  },
};
</script>

<style scoped lang="scss">
.btn_bt {
  border-top: 1px dashed #ccc;
  padding-top: 20px;
}
</style>
